<template>
  <div class="menu-page">
    <div class="menu-header">
      <button class="back-btn" @click="close">
        <i class="fas fa-times"></i>
      </button>
      <h2>菜单</h2>
    </div>
    
    <div class="menu-content">
      <div class="menu-item" @click="navigateTo('search')">
        <i class="fas fa-search"></i>
        <span>搜索</span>
      </div>
      <div class="menu-item" @click="navigateTo('playlist')">
        <i class="fas fa-list"></i>
        <span>歌单</span>
      </div>
      <div class="menu-item" @click="navigateTo('about')">
        <i class="fas fa-info"></i>
        <span>关于</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MenuPage',
  emits: ['navigate', 'close'],
  setup(props, { emit }) {
    const navigateTo = (page) => {
      emit('navigate', page)
    }
    
    const close = () => {
      emit('close')
    }
    
    return {
      navigateTo,
      close
    }
  }
}
</script>

<style scoped>
.menu-page {
  min-height: 100vh;
  background: white;
  padding: 20px;
}

.menu-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.back-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: #c62828;
  cursor: pointer;
  margin-right: 15px;
}

.menu-header h2 {
  color: #333;
  font-size: 20px;
}

.menu-content {
  display: flex;
  flex-direction: column;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.2s;
}

.menu-item:hover {
  background: #f9f9f9;
}

.menu-item i {
  font-size: 20px;
  color: #c62828;
  margin-right: 15px;
  width: 24px;
  text-align: center;
}

.menu-item span {
  font-size: 16px;
  color: #333;
}
</style>
